<template>
  <div class="container">
    <div class="header">
      <el-icon size="28" style="cursor: pointer" @click="$router.back"><ArrowLeftBold /></el-icon>
      <span style="font-size: 28px;margin-left: 5px">文章</span>
      <el-input v-model="postTitle" style="width: 85%;height: 40px;margin-left: 10px" placeholder="请输入帖子标题">
        <template #suffix>
          50/100
        </template>
      </el-input>
      <button style="margin-left: 10px">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
        <span>发布</span>
      </button>
    </div>
    <div class="main">
      <MdEditor v-model="post" theme="dark" codeTheme="github" showCodeRowNumber style="height: 100vh"/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';


const postTitle = ref('阴天')
const post = ref('# 你好\n' +
    '```java\n' +
    'int a = 1;\n' +
    'int b = a;\n' +
    '```\n' +
    '```xml\n' +
    '<abc>\n' +
    '```')

</script>

<style lang="less" scoped>

.container{
  .header{
    display: flex;
    background-color: #2b2b2b;
    align-items: center;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-size: 100% 100%;
}

button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.3em 0.8em 0.9em;
  color: white;
  background: #ad5389;
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 16px;
}

button svg {
  margin-right: 3px;
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button span {
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button:hover svg {
  transform: translateX(5px) rotate(90deg);
}

button:hover span {
  transform: translateX(7px);
}
</style>